<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <p v-text="msg"></p>
        <p v-html="msg"></p>

        <p>
            <span v-if="gender == '女'">女生，下午好</span>
            <span v-else-if="gender == '男'">先生，下午好</span>
            <span v-else>朋友，下午好</span>
        </p>
        <p>
            <ul>
                <!-- <li v-for="name in names" v-text="name"></li> -->
                <li v-for="(name,index) in names":key="index" v-text="name"></li>
            </ul>
        </p>

    </div>
    
</body>
<script src="../lib/font/vue.min.js"></script>
<script>
    let message = "<h1>你好</h1>";
    let gender = "保密";
    let names = ["张三","李四","王五"];
    new Vue({
        el:"#app",
        data:{
            msg:message,
            gender:gender,
            name:names,
        }
    })



</script>
</html>